<template>
  <view>
    <view class="edit_mobile_pop_wrapper">
      <view class="wap_line">
        <view class="wap_left first">原手机号：</view>
        <view class="wap_right no_border"><view class="number">{{show_mobile}}</view></view>
        <view class="clear"></view>
      </view>
      <view class="wap_line">
        <view class="wap_left">新手机号：</view>
        <view class="wap_right">
          <input placeholder-style="color:#757575;font-size:13px !important;"  name="mobile" v-model="mobile" id="diaLogMobile" type="number" placeholder="请输入新手机号码" class="wap_input">
        </view>
        <view class="clear"></view>
      </view>
      <view class="wap_line">
        <view class="wap_left">验证码：</view>
        <view class="wap_right">
          <input placeholder-style="color:#757575;font-size:13px !important;"  name="verifycode" id="diaLogMobileVc" v-model="code" type="number" placeholder="请输入验证码" class="wap_input">   
          <view class="wap_btn" @click="sendSms" :style="'color:'+sendSmsBtnTextColor">{{ sendSmsBtnText }}</view>
        </view>
        <view class="clear"></view>
      </view>
    </view>
    <Captcha ref="captcha"></Captcha>
	<u-top-tips ref="uTips"></u-top-tips>
  </view>
</template>

<script>
import http from '@/utils/http'
import api from '@/api'
import Captcha from '@/components/captcha/index'
import { mapState } from 'vuex'
export default {
  name: 'UpdatePhoneNumber',
  props: ['show_mobile'],
  components: {
    Captcha
  },
  data () { 
    return {
      mobile: '',
      code: '',
      regularMobile: /^13[0-9]{9}$|14[0-9]{9}$|15[0-9]{9}$|18[0-9]{9}$|17[0-9]{9}$|16[0-9]{9}$|19[0-9]{9}$/
    }
  },
  computed:{
	...mapState({
		sendSmsBtnText:state => state.sendSmsBtnText,
		sendSmsBtnTextColor:state => state.sendSmsBtnTextColor
	})  
  },
  mounted() {
  },
  methods: {
    // 提交之前的验证
    handleSubmit () {
      if (!this.mobile) {
		this.$refs.uTips.show({
			title: '请输入手机号',
			type: 'error',
		})
        return false
      }
      if (!this.regularMobile.test(this.mobile)) {
		this.$refs.uTips.show({
			title: '手机号格式不正确',
			type: 'error',
		})
        return false
      }
      if (!this.code) {
		this.$refs.uTips.show({
			title: '请输入验证码',
			type: 'error',
		})
        return false
      }
      let postData = {
        mobile: this.mobile,
        code: this.code
      }
      http
        .post(api.auth_mobile, postData)
        .then(res => {
		  this.$refs.uTips.show({
		  	title: res.message,
		  	type: 'success',
		  })
          this.$store.commit('clearCountDownFun')
          this.$parent.enable_close_mobile = true
          this.$emit('closePopup', this.mobile)
        })
        .catch(() => {})
    },
    // 发送验证码
    sendSms () {
      if (this.$store.state.sendSmsBtnDisabled) {
        return false
      }
      if (!this.mobile) {
		this.$refs.uTips.show({
			title: '请输入手机号',
			type: 'error',
		})
        return false
      }
      if (!this.regularMobile.test(this.mobile)) {
		this.$refs.uTips.show({
			title: '手机号格式不正确',
			type: 'error',
		})
        return false
      }
      this.$refs.captcha.show(res => {
        this.$store
          .dispatch('sendSmsFun', {
            url: api.sendsms_auth_mobile_nocheck,
            mobile: this.mobile,
            type: 2,
            captcha: res
          })
          .then(response => {
            if (response.code === 200) {
				this.$refs.uTips.show({
					title: this.$store.state.sendSmsMessage,
					type: 'success',
				})
            } else {
				this.$refs.uTips.show({
					title: this.$store.state.sendSmsMessage,
					type: 'error',
				})
            }
          })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.edit_mobile_pop_wrapper {
  width: 85%; margin: 0 auto; padding: 30rpx 0; font-size: 26rpx;
  .wap_line {
    position: relative; padding-left: 130rpx; overflow: hidden;
    .wap_left {
      float: left; color: #666666; width: 130rpx; text-align: left; padding: 24rpx 0; position: absolute; left: 0;
      top: 6rpx;
      &.first {
        top: 2rpx;
      }
    }
    .wap_right {
      float: right; width: 400rpx; color: #333; text-align: left; position: relative; border-bottom: 2rpx solid #e2e2e2;
      &.no_border {
        border-bottom: 0;
      }
      .number {
        padding: 24rpx 0 24rpx 6rpx; color: #333;
      }
    }
    .wap_input {
      border:0; width: 100%; padding: 20rpx 0 14rpx 6rpx; font-size: 26rpx;
      line-height: 1;
      &::placeholder {
        color: #bcbcbc; font-size: 26rpx; line-height: 1;
      }
    }
    .wap_btn {
      position: absolute; right: 0; top: 50%; transform: translate(0, -50%);
      padding: 20rpx 40rpx;
	  z-index: 10;
    }
  }
}
</style>
